<template>
  <div class="map" @click="handleClick">
    <el-col :span="14">
      <div class="map-content">
        <div id="chartMap" :style="{ width: '100%', height: '100%' }"></div>
        <div class="tip">
          <div class="radio"></div>
          <span>风险区域</span>
        </div>
        <Tag class="tag" :style="tagStyle" v-if="tagStatus">
          <div>查询清单</div>
          <div>查看本月</div>
          <div>查看上月</div>
          <div>查看本年</div>
          <div @click="handleSearch">高级查询</div>
        </Tag>
      </div>
    </el-col>
    <el-col :span="10">
      <el-form>
        <el-form-item>
          <el-date-picker v-model="data" type="month" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="val">
            <el-option label="疑似虚假宽带用户模型" value="1"> </el-option>
            <el-option label="系统间宽带信息不一致模型" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogA = true">
            审计结果图表查询
          </el-button>
        </el-form-item>
      </el-form>
      <br />
    </el-col>

    <el-dialog
      close="dialog"
      title="审计结果图表查询"
      :visible.sync="dialogA"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <span
          v-for="(item, index) in tipsArr"
          :key="index"
          style="margin-bottom: 10px; marginleft: 10px"
        >
          <el-tooltip
            effect="dark"
            :content="item.label + '终端用户量：' + item.val"
            placement="top-start"
          >
            <el-button style="margin-bottom: 10px">{{ item.label }}</el-button>
          </el-tooltip>
          <br v-if="index === 4" />
        </span>
        <div class="pagination">
          <Pagination :total="tipsArr.length" />
        </div>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogA = false"> 确 定 </el-button>
      </span>
    </el-dialog>

    <el-dialog title="高级查询" :visible.sync="dialogB" width="60%" top="10vh">
      <MapSf :sfName="clickName" />
    </el-dialog>
  </div>
</template>

<script>
import Tag from './Tag'
import Pagination from '@/components/Pagination'
import MapSf from '@/components/MapSf'
var pinyin = require('pinyin')
export default {
  components: {
    Tag,
    Pagination,
    MapSf
  },

  data() {
    return {
      clickName: '',
      val: '1',
      dialogA: false,
      dialogB: false,
      tipsArr: [
        {
          label: '广东',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '北京',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '辽宁',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '河北',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '浙江',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '陕西',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '山西',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '新疆',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '河南',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        },
        {
          label: '湖南',
          val: this.$basefn.randomNum(1000000, 1999999, 0)
        }
      ],
      data: 1580490061000,
      tagStyle: '',
      tagStatus: false,
      chartOption: {
        title: {
          text: '风险地图-风险预警',
          left: 'center'
          // textStyle: {
          //   color: 'red'
          // }
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: 10000,
          show: false,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '地图风险',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            label: {
              show: true
            },
            data: [
              { name: '广东', value: 9900 },
              { name: '山东', value: 9800 },
              { name: '安徽', value: 9600 }
            ]
          }
        ]
      }
    }
  },

  mounted() {
    this.mapRandom()
    this.drawLine()
  },

  watch: {
    data() {
      this.mapRandom()
    },
    val() {
      this.mapRandom()
    }
  },

  methods: {
    handleSearch() {
      this.dialogB = true
    },
    randomsort() {
      return Math.random() > 0.5 ? -1 : 1
    },

    mapRandom() {
      let arr = [
        '北京',
        '上海',
        '广东',
        '深圳',
        '河南',
        '天津',
        '四川',
        '重庆',
        '贵州',
        '新疆',
        '山东',
        '浙江'
      ]
      let sortArr = arr.sort(this.randomsort)
      this.chartOption.series[0].data = sortArr.slice(0, 3).map(item => {
        return {
          name: item,
          value: 9999
        }
      })
      this.drawLine()
    },

    drawLine() {
      let _this = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartMap'))
      // 绘制图表
      myChart.setOption(this.chartOption)

      myChart.on('click', params => {
        this.clickName = this.toStr(
          pinyin(params.name, {
            style: pinyin.STYLE_NORMAL
          })
        )
        _this.tagStatus = true
        let clickPosition = params.event
        let x = clickPosition.offsetX
        let y = clickPosition.offsetY
        _this.tagStyle = `top:${y - 100}px;left:${x - 20}px`
      })

      myChart.getZr().on('click', () => {
        _this.tagStatus = false
      })
    },

    handleClick(e) {
      if (e.target.tagName !== 'CANVAS') this.tagStatus = false
    },

    toStr(arr) {
      let str = ''
      arr.forEach(item => {
        str += item[0]
      })
      return str
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  .map-content {
    width: 800px;
    height: 600px;
    position: relative;
    margin-bottom: 50px;
    .tag {
      line-height: 1.5;
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      div {
        cursor: pointer;
      }
    }
  }
  .tip {
    display: flex;
    align-items: center;
    justify-content: center;
    .radio {
      width: 10px;
      height: 10px;
      border-radius: 100px;
      background-color: red;
    }
    span {
      font-weight: 600;
      color: red;
      margin-left: 10px;
    }
  }
}
</style>
